import { AddHospitalSetBody, getOneHospitalSet, ModifyHospitalSetBody } from '@/api/hospital/hospitalset';
import { Button, Card, Form, Input, message } from 'antd'
import React, { useEffect } from 'react'
import { useNavigate, useParams } from 'react-router-dom';

export default function AddOrUpdateHospitalSet() {
    // 创建表单实例对象
    let [form] = Form.useForm();
    //接收路由传递的参数
    let { sid } = useParams();
    const initshowHospitalSet = async () => {
        //类型断言
        let result = await getOneHospitalSet(sid as string);
        //{hoscode:'xxx',hosname:'xx'}
        //利用表单实例对象中的方法来自动读取数据
        //注意：表单的name名称要和获取的对象中的键名一致，才可以按照名称将值对应显示到文本框中
        form.setFieldsValue(result);
    }
    //组件加载完成之后，需要做的是单条数据的ajax请求
    useEffect(() => {
        //调用函数
        initshowHospitalSet()
    }, [])
    //实现路由后退，需要useNavigate钩子
    let navigate = useNavigate();

    //定义事件函数
    let finish = async () => {
        //当如果一个组件既要求完成添加和修改功能，主要区分点就在于路由上有没有参数，如果有参数则为修改，否则是添加
        if (sid) {
            //编辑功能
            try {
                await ModifyHospitalSetBody({
                    ...form.getFieldsValue(), //{hosname:'xxx',hoscode:"xxx"}
                    //更新id条件参数，不能缺少
                    id: sid
                });
                message.success('编辑医院设置成功');
            } catch (e) {
                message.error('编辑医院设置失败');
            }
        } else {
            //添加功能
            //添加医院设置功能
            try {
                await AddHospitalSetBody(form.getFieldsValue());
                message.success('添加医院设置成功');
            } catch (e) {
                message.error('添加医院设置失败');
            }
        }
        //调用接口函数
        //路由后退
        navigate(-1);
    }
    return (
        <Card>
            <Form
                name="basic"
                labelCol={{ span: 2 }}
                wrapperCol={{ span: 22 }}
                autoComplete="off"
                onFinish={finish}
                form={form}
            >
                <Form.Item
                    label="医院名称"
                    name="hosname"
                    rules={[{ required: true, message: '请输入医院名称' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="医院编号"
                    name="hoscode"
                    rules={[{ required: true, message: '请输入医院编号' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="api基础路径"
                    name="apiUrl"
                    rules={[{ required: true, message: '请输入api基础路径' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人姓名"
                    name="contactsName"
                    rules={[
                        { required: true, message: '请输入联系人姓名' },
                        { pattern: /^[\u4e00-\u9fa5]{2,10}$/, message: '请输入中文汉字姓名' }

                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人手机"
                    name="contactsPhone"
                    rules={
                        [
                            { required: true, message: '请输入联系人手机' },
                            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式' }
                        ]
                    }
                >
                    <Input />
                </Form.Item>


                <Form.Item wrapperCol={{ offset: 2, span: 3 }}>
                    <Button type="primary" htmlType="submit">
                        保存
                    </Button>
                    <Button htmlType="button" className='ml1' onClick={() => {
                        navigate(-1)
                    }}>
                        返回
                    </Button>
                </Form.Item>
            </Form>
        </Card>
    )
}
